<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
    <meta name="HandheldFriendly" content="true" />
    <link rel="stylesheet" href="jquery.mobile-1.4.3.min.css" />
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery.mobile-1.4.3.min.js"></script>
    <script type="text/javascript">
        function queryError(tx, err) {

            alert(err.message ? err.message : err.toString());
        }



        try {
            var db = window.openDatabase('database', '1.0', '用户信息数据库', 2 * 1024 * 1024);
        } catch (err) {
            alert(err.message ? err.message : err.toSting());
        }
        if (!db) alert("不能连接数据库！");



        function register(tx) {
            var name = document.getElementById('name').value;
            var psw = document.getElementById('password').value;

            sql = "INSERT INTO user(username,password) VALUES('" + name + "','" + psw + "')";

            tx.executeSql(sql);
        }

        function start() {

            db.transaction(register);
            alert('注册成功！');
            self.location = 'login.html';
        }
    </script>


    <title></title>
</head>

<body>
    <div data-role="page">
        <div data-role="header">
            <h1>注册</h1>
        </div>
        <div data-role="content">

            <form action="#">
                <div data-role="fieldcontain">
                    <label for="name">用户名 ：</label>
                    <input name="username" type="text" id="name" value="" /></div>
                <div data-role="fieldcontain">
                    <label for="textarea">密 码&nbsp ：</label>
                    <input name="password" type="text" id="password" /></div>

                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <legend>请选择性别：</legend>
                        <input type="radio" name="r1" id="r1" value="c1" checked="checked" />
                        <label for="r1">男</label>
                        <input type="radio" name="r1" id="r2" value="c2" />
                        <label for="r2">女</label>
                    </fieldset>
                </div>

                <div data-role="fieldcontain">
                    <label for="slider">年龄 ：</label>
                    <input type="range" name="slider" id="slider" value="50" min="0" max="150" />
                </div>
                <div data-role="fieldcontain">
                    <label for="slider">是否接收邮件:</label>
                    <select name="slider" id="slider" data-role="slider">
 <option value="off">是</option>
  <option value="on">否</option>
  </select>
                </div>

                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <legend>喜欢的颜色：</legend>
                        <input type="checkbox" name="red" id="red" value="red" />
                        <label for="red">红色</label>
                        <input type="checkbox" name="yellow" id="yellow" value="yellow" />
                        <label for="yellow">黄色</label>
                        <input type="checkbox" name="blue" id="blue" value="blue" />
                        <label for="blue">蓝色</label>

                    </fieldset>
                </div>



                <div data-role="fieldcontain">
                    <input name="login" type="button" value="注册" onClick="start()" /></div>
                <div data-role="fieldcontain">
                    <input name="reset" type="reset" value="重置" />
                </div>




            </form>
        </div>
    </div>

</body>

</html>